<#assign base=request.contextPath />
<#import "/tags/select.ftl" as k />
<#import "/tags/app.ftl" as app />
<!DOCTYPE html>
<html>
<head>
  <base href="${base}">	
  <meta charset="utf-8">
  <title>闲言轻博客</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${base}/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="${base}/static/blog/css/mian.css" media="all">
  <style>
  .more {
	  	position: relative;
	    z-index: 9999;
	    padding-top: 160px;
	    bottom: 2px;
	    margin-top: -160px;
	    margin-bottom: 10px;
	    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),color-stop(70%,#fff));
	    background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0,#fff 70%);
	    text-align: center;
	    font-size: 16px;
  }
  </style>
</head>

<body class="lay-blog">
		<@app.header active="首页"/>
		<div class="container-wrap">
			<div class="container">
					<div id="main" class="contar-wrap">
						<h4 class="item-title">
							<p><i class="layui-icon layui-icon-speaker"></i>公告：<span>${(tb.title)!'暂无公告！'}</span></p>
						</h4>
					</div>
					<div class="item-btn">
						<button class="layui-btn" id="nextpage">加载下一页</button>
					</div>
			</div>
		</div>
		<div class="footer">
			<p>
				<span>&copy; 2018</span>
				<span><a href="http://www.layui.com" target="_blank">layui.com</a></span> 
				<span>MIT license</span>
			</p>
			<p><span>人生就是一场修行</span></p>
		</div>
		
	<script id="article" type="text/html">		
	{{# layui.each(d, function(index, item){ }}
		<div class="item">
			<div class="item-box  layer-photos-demo2 layer-photos-demo">
				<h3><a href="${base}/blog/front/view/{{item.oid}}">{{item.title}}</a></h3>
				<h5><span class="layui-badge layui-bg-blue">{{item.type.itemValue}}</span> 发布于：<span>{{item.ctime}}</span></h5>
				{{item.content}}
			</div>
			<div class="comment count">
				<a href="${base}/blog/front/comment">评论</a>
				<a href="javascript:;" class="like">点赞</a>
			</div>
		</div>
	{{# }) }}
	</script>	
	
	<script src="${base}/layuiadmin/layui/layui.js"></script>
	<script src="${base}/js/lib/jquery-1.11.3.min.js"></script>
	<script src="${base}/js/readmore.js"></script>
	<script>	
		var page = 1;
		var next = 1;
		layui.config({
		  	base: '${base}/static/blog/js/' 
		}).use(['blog', 'laytpl'], function() {
			var $ = layui.$;
			var layer = layui.layer;
			
			$('#nextpage').click(function() {
				show_page(next);
			})
			
			show_page(1);
		});	
		
		function show_page(page) {
			// jquery低版本
			$.post('${base}/blog/front/list', {page}, function(ret) {
				page = ret.pageNo;
				var totalPage = ret.totalPages;
				
				// 渲染模板
				layui.laytpl($('#article').html()).render(ret.data, function(txt) {
					$('#main').append(txt);
  					next = page + 1;
  					
  					// FIXME: 如何给动态生成的元素，调用jquery的方法
					$('.item', $('#main')).readmore({
						maxHeight: 180,
						moreLink: '<a href="#" class="more">展开阅读全文 <i class="layui-icon layui-icon-down" style="color:red;"></i>  </a>',
						lessLink: '',
						afterToggle: function(a, b, c) {
							if(c) {
								$(this).find('a[aria-controls]').addClass('expend');
							} else {
								$(this).find('a[aria-controls]').removeClass('expend');
							}
						}
					});
  		  		});
				
				if(page == totalPage) {
					next = page;
					$('#nextpage').html('已经是最后一页了').attr('disabled', true);
				}
			});
		}
		
		
		
	</script>
</body>
</html>